<template>
  <div class="detail">
    <header-template-phone>
      <template v-slot:left>
        <span class="icon" @click="back">
          <i class="iconfont iconstbar_fanhui"></i>
        </span>
        <span>返回</span>
      </template>
      <template v-slot:center>
        会员详情
      </template>
      <template v-slot:right>
        <div @click="showEditPage">
          编辑
        </div>
      </template>
    </header-template-phone>
    <div class="main">
      <div>
        <relation-display-phone :item="item"></relation-display-phone>
      </div>
      <div class="box-shadow list-wrapper">
        <order-item :title="'用户名:'" :width="70">
          <span>{{item.accountName}}</span>
        </order-item>
        <order-item :title="'账号类型:'" :width="70">
          <span>{{item.accountType == 'agent' ? '代理' : '会员'}}</span>
        </order-item>
        <order-item :title="'个人余额:'" :width="70">
          <span :class="item.personalBalance > 0 ? 'red' : ''">{{item.personalBalance}}</span>
        </order-item>
        <order-item :title="'团队余额:'" :width="70">
          <span :class="item.groupBalance > 0 ? 'red' : ''">{{item.groupBalance}}</span>
        </order-item>
      </div>
      <div class="box-shadow list-wrapper">
        <order-item :title="'彩票返点:'" :width="70">
          <span>{{item.lotteryRefundRate | formatPercent}}</span>
          <span class="red">({{item.lotteryRefund}})</span>
        </order-item>
        <order-item :title="'AG返点:'" :width="70">
          <span>{{item.agRefundRate | formatPercent}}</span>
          <span class="red">({{item.agRefund}})</span>
        </order-item>
        <order-item :title="'皇冠返点:'" :width="70">
          <span>{{item.chrownRefundRate | formatPercent}}</span>
          <span class="red">({{item.chrownRefund}})</span>
        </order-item>
        <order-item :title="'分红:'" :width="70">
          <span>{{item.bonusRefundRate | formatPercent}}</span>
          <span class="red">({{item.bonusRefund}})</span>
        </order-item>
        <order-item :title="'日工资:'" :width="70">
          <span>{{item.salaryRefundRate | formatPercent}}</span>
          <span class="red">({{item.salaryRefund}})</span>
        </order-item>
      </div>
      <div class="box-shadow list-wrapper">
        <order-item :title="'注册时间:'" :width="70">
          <span>{{item.signupTime | formater}}</span>
        </order-item>
        <order-item :title="'最后登陆:'" :width="70">
          <span>{{item.lastLogin | formater}}</span>
        </order-item>
      </div>
    </div>
    <div class="edit-refund layer-style" v-if="isEditPageVisiable">
      <edit-member-info
      @click="hideEditPage" 
      :item="item">
      </edit-member-info>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
// import DetailList from './detail-list'
import RelationDisplayPhone from '@/components/relation-display/relation-display-phone'
import OrderItem from '@/components/base/order-specification/order-item'
import EditMemberInfo from './edit-member-info'

import { formatDateYMD } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    HeaderTemplatePhone,
    OrderItem,
    RelationDisplayPhone,
    EditMemberInfo
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {a: 1}
      }
    }
  },
  created() {
    console.log(this.item)
  },
  data() {
    return {
      isEditPageVisiable: false
    }
  },
  methods: {
    back() {
      this.$emit('click')
    },
    dateFormatter(time) {
      return formatDateYMD(time)
    },
    showEditPage() {
      this.isEditPageVisiable = true
    },
    hideEditPage() {
      this.isEditPageVisiable = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (max-width 750px)
    .main >>> .title 
      text-align left !important
    .main
      box-sizing border-box 
      padding 0 10px
      padding-top 58px 
      .date 
        line-height 48px
        margin-top 10px
        text-align center
        background #fff 
        border-radius 3px 
      .list-wrapper 
        margin-top 10px
        border-radius 3px
        box-sizing border-box 
        padding 10px 0
        background #fff
        .red 
          color $color-theme-red
          
</style>